<script setup lang="ts">
// /api/admin/profits/users/stats
import { useECharts } from "@pureadmin/utils";
import { ref, watch, nextTick, PropType } from "vue";

// TS 类型定义
interface AllStats {
  totalProfit: number;
  totalSales: number;
  totalTasks: number;
  totalCost: number;
  totalDiscount: number;
}

const props = defineProps({
  // 传入的 data 就是一个数组，数组中的对象包含用户统计数据
  data: {
    type: Object as PropType<AllStats>,
    default: () => ({})
  }
});

const chartRef = ref<HTMLDivElement>();
const themeName = "lowSaturationFancy";
const { setOptions } = useECharts(chartRef, { theme: themeName });

watch(
  () => props.data,
  async () => {
    await nextTick();

    const option = {
      tooltip: { trigger: "axis" },
      legend: { data: ["总销售额", "总成本", "总利润", "总折扣", "总任务数"] },
      xAxis: {
        type: "category",
        data: ["总销售额", "总成本", "总利润", "总折扣", "总任务数"]
      },
      yAxis: [
        { name: "积分", type: "value" }, // 左侧 Y 轴
        { name: "任务数", type: "value", alignTicks: true } // 右侧 Y 轴
      ],
      series: [
        // 柱状图（金额类）
        {
          name: "总销售额",
          type: "bar",
          data: [props.data.totalSales, null, null, null, null], // 仅在第一位置显示
          label: { show: true, position: "top" }
        },
        {
          name: "总成本",
          type: "bar",
          data: [null, props.data.totalCost, null, null, null], // 仅在第二位置显示
          label: { show: true, position: "top" }
        },
        {
          name: "总利润",
          type: "bar",
          data: [null, null, props.data.totalProfit, null, null], // 仅在第三位置显示
          label: { show: true, position: "top" }
        },
        {
          name: "总折扣",
          type: "bar",
          data: [null, null, null, props.data.totalDiscount, null], // 仅在第三位置显示
          label: { show: true, position: "top" }
        },
        // 折线图（任务数）
        {
          name: "总任务数",
          type: "line",
          yAxisIndex: 1, // 使用右侧 Y 轴
          data: [null, null, null, null, props.data.totalTasks],
          label: { show: true, position: "top" }
        }
      ]
    };

    setOptions(option);
  },
  { immediate: true, deep: true }
);
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 365px" />
</template>
